<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI API路由器 - API文档</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            color: white;
            margin-bottom: 40px;
        }
        
        .header h1 {
            font-size: 3rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        .header p {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .content {
            background: white;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .nav {
            background: #f8fafc;
            padding: 20px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .nav a {
            color: #4f46e5;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 6px;
            transition: background 0.2s;
        }
        
        .nav a:hover {
            background: #e0e7ff;
        }
        
        .main {
            padding: 40px;
        }
        
        .section {
            margin-bottom: 40px;
        }
        
        .section h2 {
            color: #1f2937;
            font-size: 1.8rem;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e5e7eb;
        }
        
        .section h3 {
            color: #374151;
            font-size: 1.3rem;
            margin: 20px 0 10px 0;
        }
        
        .endpoint {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .method {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: bold;
            font-size: 0.8rem;
            margin-right: 10px;
        }
        
        .method.get { background: #dcfce7; color: #166534; }
        .method.post { background: #dbeafe; color: #1e40af; }
        .method.put { background: #fef3c7; color: #92400e; }
        .method.delete { background: #fecaca; color: #991b1b; }
        
        .url {
            font-family: monospace;
            font-size: 1.1rem;
            color: #1f2937;
        }
        
        .description {
            margin: 10px 0;
            color: #6b7280;
        }
        
        .code-block {
            background: #1f2937;
            color: #f9fafb;
            padding: 20px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 10px 0;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
        }
        
        .params {
            margin: 15px 0;
        }
        
        .params h4 {
            color: #374151;
            margin-bottom: 10px;
        }
        
        .param {
            background: white;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 8px;
        }
        
        .param-name {
            font-weight: bold;
            color: #1f2937;
        }
        
        .param-type {
            color: #6b7280;
            font-size: 0.9rem;
        }
        
        .param-desc {
            color: #4b5563;
            margin-top: 5px;
        }
        
        .example {
            margin: 15px 0;
        }
        
        .example h4 {
            color: #374151;
            margin-bottom: 10px;
        }
        
        .response {
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            border-radius: 6px;
            padding: 15px;
            margin: 10px 0;
        }
        
        .response h5 {
            color: #166534;
            margin-bottom: 8px;
        }
        
        .highlight {
            background: #fef3c7;
            padding: 15px;
            border-radius: 6px;
            border-left: 4px solid #f59e0b;
            margin: 20px 0;
        }
        
        .highlight h4 {
            color: #92400e;
            margin-bottom: 8px;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .main {
                padding: 20px;
            }
            
            .nav ul {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 AI API路由器</h1>
            <p>统一管理和路由多个AI模型的API服务</p>
        </div>
        
        <div class="content">
            <div class="nav">
                <ul>
                    <li><a href="#overview">概述</a></li>
                    <li><a href="#models">模型管理</a></li>
                    <li><a href="#chat">聊天接口</a></li>
                    <li><a href="#examples">使用示例</a></li>
                    <li><a href="#integration">集成指南</a></li>
                </ul>
            </div>
            
            <div class="main">
                <div id="overview" class="section">
                    <h2>📖 API概述</h2>
                    <p>AI API路由器提供统一的API接口来管理和使用多个AI模型。支持Ollama和OpenAI兼容的API服务。</p>
                    
                    <div class="highlight">
                        <h4>🌐 基础URL</h4>
                        <p><strong>开发环境：</strong> <code>http://localhost:3001</code></p>
                        <p><strong>生产环境：</strong> 请替换为您的服务器地址</p>
                    </div>
                </div>
                
                <div id="models" class="section">
                    <h2>🤖 模型管理API</h2>
                    
                    <div class="endpoint">
                        <div>
                            <span class="method get">GET</span>
                            <span class="url">/api/models</span>
                        </div>
                        <div class="description">获取所有已配置的模型列表</div>
                        
                        <div class="response">
                            <h5>响应示例：</h5>
                            <div class="code-block">[
  {
    "id": "1",
    "name": "llama2",
    "type": "ollama",
    "baseUrl": "http://localhost:11434",
    "apiKey": ""
  }
]</div>
                        </div>
                    </div>
                    
                    <div class="endpoint">
                        <div>
                            <span class="method post">POST</span>
                            <span class="url">/api/models</span>
                        </div>
                        <div class="description">添加新的AI模型配置</div>
                        
                        <div class="params">
                            <h4>请求参数：</h4>
                            <div class="param">
                                <div class="param-name">name <span class="param-type">(string, 必需)</span></div>
                                <div class="param-desc">模型名称</div>
                            </div>
                            <div class="param">
                                <div class="param-name">type <span class="param-type">(string, 必需)</span></div>
                                <div class="param-desc">模型类型："ollama" 或 "openai"</div>
                            </div>
                            <div class="param">
                                <div class="param-name">baseUrl <span class="param-type">(string, 必需)</span></div>
                                <div class="param-desc">API基础URL</div>
                            </div>
                            <div class="param">
                                <div class="param-name">apiKey <span class="param-type">(string, 可选)</span></div>
                                <div class="param-desc">API密钥（OpenAI类型需要）</div>
                            </div>
                        </div>
                        
                        <div class="example">
                            <h4>请求示例：</h4>
                            <div class="code-block">{
  "name": "gpt-3.5-turbo",
  "type": "openai",
  "baseUrl": "https://api.openai.com",
  "apiKey": "sk-..."
}</div>
                        </div>
                    </div>
                    
                    <div class="endpoint">
                        <div>
                            <span class="method post">POST</span>
                            <span class="url">/api/detect-models</span>
                        </div>
                        <div class="description">检测指定API服务的可用模型</div>
                        
                        <div class="params">
                            <h4>请求参数：</h4>
                            <div class="param">
                                <div class="param-name">baseUrl <span class="param-type">(string, 必需)</span></div>
                                <div class="param-desc">要检测的API基础URL</div>
                            </div>
                            <div class="param">
                                <div class="param-name">type <span class="param-type">(string, 必需)</span></div>
                                <div class="param-desc">API类型："ollama" 或 "openai"</div>
                            </div>
                            <div class="param">
                                <div class="param-name">apiKey <span class="param-type">(string, 可选)</span></div>
                                <div class="param-desc">API密钥</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="endpoint">
                        <div>
                            <span class="method post">POST</span>
                            <span class="url">/api/test-model</span>
                        </div>
                        <div class="description">测试指定模型的连接状态</div>
                        
                        <div class="params">
                            <h4>请求参数：</h4>
                            <div class="param">
                                <div class="param-name">id <span class="param-type">(string, 必需)</span></div>
                                <div class="param-desc">要测试的模型ID</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="chat" class="section">
                    <h2>💬 聊天接口API</h2>
                    
                    <div class="endpoint">
                        <div>
                            <span class="method post">POST</span>
                            <span class="url">/v1/chat/completions</span>
                        </div>
                        <div class="description">统一的聊天完成接口，兼容OpenAI API格式</div>
                        
                        <div class="params">
                            <h4>请求参数：</h4>
                            <div class="param">
                                <div class="param-name">model <span class="param-type">(string, 必需)</span></div>
                                <div class="param-desc">要使用的模型名称（必须是已配置的模型）</div>
                            </div>
                            <div class="param">
                                <div class="param-name">messages <span class="param-type">(array, 必需)</span></div>
                                <div class="param-desc">对话消息数组</div>
                            </div>
                            <div class="param">
                                <div class="param-name">temperature <span class="param-type">(number, 可选)</span></div>
                                <div class="param-desc">温度参数，控制随机性 (0-1)</div>
                            </div>
                            <div class="param">
                                <div class="param-name">max_tokens <span class="param-type">(number, 可选)</span></div>
                                <div class="param-desc">最大生成token数</div>
                            </div>
                        </div>
                        
                        <div class="example">
                            <h4>请求示例：</h4>
                            <div class="code-block">{
  "model": "llama2",
  "messages": [
    {
      "role": "user",
      "content": "你好，请介绍一下自己"
    }
  ],
  "temperature": 0.7,
  "max_tokens": 1000
}</div>
                        </div>
                        
                        <div class="response">
                            <h5>响应示例：</h5>
                            <div class="code-block">{
  "id": "chatcmpl-123",
  "object": "chat.completion",
  "created": 1677652288,
  "model": "llama2",
  "choices": [
    {
      "index": 0,
      "message": {
        "role": "assistant",
        "content": "你好！我是一个AI助手..."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 9,
    "completion_tokens": 12,
    "total_tokens": 21
  }
}</div>
                        </div>
                    </div>
                </div>
                
                <div id="examples" class="section">
                    <h2>🛠️ 使用示例</h2>
                    
                    <h3>JavaScript/Node.js</h3>
                    <div class="code-block">// 使用fetch发送请求
const response = await fetch('http://localhost:3001/v1/chat/completions', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    model: 'llama2',
    messages: [
      { role: 'user', content: '你好' }
    ]
  })
});

const data = await response.json();
console.log(data.choices[0].message.content);</div>
                    
                    <h3>Python</h3>
                    <div class="code-block">import requests

url = 'http://localhost:3001/v1/chat/completions'
data = {
    'model': 'llama2',
    'messages': [
        {'role': 'user', 'content': '你好'}
    ]
}

response = requests.post(url, json=data)
result = response.json()
print(result['choices'][0]['message']['content'])</div>
                    
                    <h3>cURL</h3>
                    <div class="code-block">curl -X POST http://localhost:3001/v1/chat/completions \
  -H "Content-Type: application/json" \
  -d '{
    "model": "llama2",
    "messages": [
      {"role": "user", "content": "你好"}
    ]
  }'</div>
                </div>
                
                <div id="integration" class="section">
                    <h2>🔗 集成指南</h2>
                    
                    <h3>1. 配置模型</h3>
                    <p>首先通过管理界面或API添加您要使用的AI模型：</p>
                    <ul style="margin: 10px 0 10px 20px;">
                        <li>访问 <code>http://localhost:8080</code> 打开管理界面</li>
                        <li>点击"检测模型"自动发现可用模型</li>
                        <li>或手动添加模型配置</li>
                    </ul>
                    
                    <h3>2. 使用统一接口</h3>
                    <p>配置完成后，您可以通过统一的 <code>/v1/chat/completions</code> 接口使用所有模型。</p>
                    
                    <h3>3. 兼容性</h3>
                    <p>本API完全兼容OpenAI的聊天完成接口，您可以：</p>
                    <ul style="margin: 10px 0 10px 20px;">
                        <li>直接替换现有OpenAI API调用的URL</li>
                        <li>使用任何支持OpenAI API的客户端库</li>
                        <li>无需修改现有代码逻辑</li>
                    </ul>
                    
                    <div class="highlight">
                        <h4>💡 提示</h4>
                        <p>• 确保目标AI服务正在运行并可访问</p>
                        <p>• 对于OpenAI兼容服务，请正确配置API密钥</p>
                        <p>• 可以通过管理界面测试模型连接状态</p>
                        <p>• 支持同时使用多个不同类型的AI模型</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>